<script setup lang="ts">
import { reactive, ref } from "vue";
import { currentGET } from "@/api";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import seamlessScroll from "@/components/seamless-scroll";
import 'swiper/less'; // 引入 Swiper 的 CSS 文件
// import 'swiper/swiper-bundle.css'; // 引入 Swiper 的完整样式
interface Slide {
  PicUrl: string;
}
const slides = ref<Slide[]>([]);
const modules = [Autoplay];

const state = reactive<any>({
  list: [],
  defaultOption: {
    // ...defaultOption.value,
    singleWidth: 620,
    limitScrollNum: 1,
    singleWaitTime: 2000,
    singleLine:true,
    step:1,
    direction:'left'
  },
  scroll: true,

});

const getData = () => {
  currentGET("leftTop").then((res) => {
 
    if (res.error == '0') {
      state.list = res["stat_ifa_Dmax_BNUZ_GetHomePic_list1"];
      
    }
  });
};
getData();
</script>

<template>
 
  <div class="w-[100%] h-[100%] overflow-hidden">
    <!-- <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      :lopp="true"
      :autoplay="{ delay: 2500 }"

    >
      <swiper-slide v-for="(slide, index) in state.list" :key="index">
        <el-image :src="slide.PicUrl" fit="fill" class="h-full w-full"></el-image>
      </swiper-slide>
    </swiper> -->
    <seamlessScroll
      :list="state.list"
      :singleLine="state.defaultOption.singleLine"
      :limitScrollNum="state.defaultOption.limitScrollNum"
      :singleWidth="state.defaultOption.singleWidth"
      :hover="state.defaultOption.hover"
      :singleWaitTime="state.defaultOption.singleWaitTime"
      :direction="state.defaultOption.direction"
      :step="state.defaultOption.step"
      class="w-[100%] h-[100%]"
    >
      <div v-for="(slide, index) in state.list" :key="index" class="w-[100%] h-[100%]">
        <el-image :src="slide.PicUrl" fit="fill" class="h-full w-full"></el-image>
      </div>
    </seamlessScroll>  
    
  </div>
</template>

<style scoped lang="less">
.left-top {
  width: 100%;
  height: 100%;
}
.swiper{
  height: 100%;
  height: 95%;
}



</style>
